---
// Component Imports
import MainHead from '../components/MainHead.astro';
import Button from '../components/Button/index.jsx';
import Nav from '../components/Nav/index.jsx';
import Footer from '../components/Footer/index.jsx';
import PortfolioPreview from '../components/PortfolioPreview/index.jsx';

// Data Fetching: List all Markdown posts in the repo.
const projects = await Astro.glob('./project/**/*.md');
const featuredProject = projects[0];

// Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/
---

<html lang="en">
	<head>
		<MainHead
			title="Jeanine White: Personal Site"
			description="Jeanine White: Developer, Speaker, and Writer..."
		/>
		<style lang="scss">
			$w-s: 750px;

			.hero {
				position: relative;
				overflow: hidden;

				@media (min-width: $w-s) {
					height: 45vw;
				}
			}

			.img {
				display: block;
				width: 100%;
				height: auto;
			}

			.gradient,
			.gradient2 {
				background-image: url('/assets/mesh-gradient.jpg');
				background-size: cover;
				pointer-events: none;
				mix-blend-mode: screen;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
			}

			.gradient2 {
				mix-blend-mode: multiply;
				background-size: cover;
			}

			.overlay {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 10;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				padding-left: 2rem;

				@media (min-width: $w-s) {
					padding-left: 4rem;
				}
			}

			.title {
				font-weight: 900;
				font-size: var(--f-u8);
				margin-bottom: 0.5rem;
				margin-top: 0;

				@media (min-width: $w-s) {
					font-size: var(--f-u12);
				}
			}

			.grid {
				display: grid;
				grid-gap: 2rem;

				@media (min-width: 1200px) {
					grid-template-columns: 2fr 1fr;
				}
			}

			.sectionTitle {
				font-weight: 700;
				font-size: var(--f-u8);
				margin-top: 4rem;
				margin-bottom: 2rem;
			}

			.role {
				position: relative;
				display: inline-block;
				font-weight: 900;
				color: var(--t-bg);
				background-color: var(--t-fg);
				padding: 0.25em 0.5em;
				z-index: 2;

				@media (min-width: $w-s) {
					font-size: var(--f-u3);
				}

				+ .role {
					margin-left: 1em;
				}

				&:nth-of-type(1) {
					.invert {
						background-color: var(--c-pink);
					}
				}

				&:nth-of-type(2) {
					.invert {
						background-color: var(--c-blue);
					}
				}

				&:nth-of-type(3) {
					.invert {
						background-color: var(--c-green);
					}
				}

				&:hover {
					.invert {
						clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
					}
				}
			}

			.invert {
				position: absolute;
				color: var(--t-fg);
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				pointer-events: none;
				clip-path: polygon(0% 100%, 100% 100%, 100% 200%, 0% 200%);
				transition: clip-path cubic-bezier(0.4, 0, 0.5, 1) 150ms;
			}

			.desc {
				font-size: var(--f-u2);
				margin-top: 1.5rem;
				margin-bottom: 0;
			}

			.subtitle {
				display: block;
				font-weight: 400;
				font-size: var(--f-d6);
				letter-spacing: -0.0625em;
			}

			.bio {
				line-height: 2;
				margin-bottom: 2rem;

				> span:first-of-type {
					line-height: 1;
					margin-bottom: 0.5em;
					display: block;
					font-weight: 700;
					font-size: var(--f-u4);
				}
			}
		</style>
	</head>
	<body>
		<Nav />
		<header class="hero">
			<img
				width="1600"
				height="1131"
				class="img"
				src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75"
				srcset="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 800w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 1200w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1600&q=75 1600w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=2400&q=75 2400w"
				sizes="(max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px, (max-width: 2400px) 2400px, 1200px"
			/>
			<div class="gradient"></div>
			<div class="gradient2"></div>
			<div class="overlay">
				<h1 class="title">
					<small class="subtitle">The personal site of</small>Jeanine White
				</h1>
				<div>
					<span class="role">👩‍💻 Developer <span class="invert">👩‍💻 Developer</span></span>&nbsp;
					<span class="role">🎤 Speaker <span class="invert">🎤 Speaker</span></span>&nbsp;
					<span class="role">✏️ Writer <span class="invert">✏️ Writer</span></span>
				</div>
				<p class="desc">Lover of dogs, roadtrips, and poetry.</p>
			</div>
		</header>
		<main class="wrapper mt4 mb4">
			<div class="grid">
				<div class="section">
					<h3 class="sectionTitle">Selected Work</h3>
					<PortfolioPreview project={featuredProject} />
					<div class="tac mt4">
						<a href="/projects">
							<Button>View All</Button>
						</a>
					</div>
				</div>
				<div class="section">
					<h3 class="sectionTitle">About me</h3>
					<p class="bio">
						<span>Hello!</span> I’m Jeanine, and this is my website. It was made using{' '}
						<a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> Astro</a>,
						a new way to build static sites. This is just an example template for you to modify.
					</p>
					<p>
						<a href="/about">Read more</a>
					</p>
				</div>
			</div>
		</main>
		<Footer />
	</body>
</html>
